<template>
	<view class="box" :class="{ 'no-scroll': popupVisible }">
		<view class="container">
			<view class="form-item">
				<view class="left-align">
					<text class="required">*</text>
					<text>问题标题</text>
				</view>
			</view>
			<input class="title-input" placeholder="请填写任务标题" v-model="taskTitle" />
			<view class="form-item">
				<view class="left-align">
					<text class="required">*</text>
					<text>问题描述</text>
				</view>
			</view>
			<textarea class="description-textarea" placeholder="请填写问题描述" v-model="taskDescription"></textarea>
		</view>
		<view style="background: #F6F6F6; height: 20rpx; width: 100%;"></view>
		<view class="xuanze">
			<view class="suozxm">
				<view style="display: flex;">
					<text class="left_bx" @click="showPopup = true">所在项目</text>
					<view class="coliau" @click="showPopup = true">{{ selectedProjectName || '所选项目' }}</view>
					<view style="margin-left: 245rpx;" @click="showPopup = true"> > </view>
					<view v-if="showPopup"
						style="background-color:#000; z-index:900; height:100%; width:100%; opacity:0.3; position:fixed; left:0; top:0;">
					</view>
					<view v-if="showPopup"
						style="z-index:1000; background-color:#FFF; width:750rpx; box-shadow:rgba(0, 0, 0, 0.4) 1rpx 2rpx 8rpx 1rpx; position:fixed; left:0; bottom:0; border-top-right-radius:30rpx; border-top-left-radius:30rpx;">
						<view
							style="width:750rpx; font-weight:600; font-size:30rpx; display:flex; justify-content:center; align-items:center; padding-top:20rpx;">
							<view @click="showPopup = false" style=" position:fixed; z-index:100; right:50rpx;">
								<image style="width: 30rpx; height: 30rpx" src="/static/close.png"></image>
							</view>
							<view>
								<view>请选择项目</view>
								<view
									style="font-weight:500; height:50rpx; font-size:23rpx; color:#696969; display:flex; justify-content:center; align-items:center; margin-top:10rpx;">
									请在下方选择
								</view>
							</view>
						</view>
						<view
							style="width:750rpx; display:flex; justify-content:space-between; align-items:center; margin-bottom:30rpx; margin-top:10rpx;">
							<input v-model="SearchCustomers" @input="onInputBatchName"
								style="margin-left:30rpx; padding-left:20rpx; border: #A9A9A9 solid 1rpx; border-radius: 10rpx;height: 70rpx; font-size:35rpx; width:500rpx;"
								placeholder="请输入客户名称" />
							<view>
								<view size="small" color="#3689F5" @click="getInquireCustomerList"
									style="margin-right:30rpx; width: 140rpx; border-radius:20rpx; display: flex; justify-content: center; align-items: center; background-color: #5677fc; height: 70rpx; color: #fff;">
									搜索
								</view>
							</view>
						</view>
						<scroll-view scroll-y="true" style="max-height: 600rpx; min-height: 600rpx;">
							<view style="padding-bottom:100rpx;">
								<view v-for="(item, index) in filteredCustomerList" :key="index"
									@click="CustomerSelectionMethod(item)" style="height:100rpx; font-size:25rpx;">
									<view size="default"
										style="border-style:none; height:100rpx; display:flex; justify-content:center; align-items:center; font-size: 30rpx;">
										{{ item.xingMu }}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="suozxm">
				<view style="display: flex;">
					<text class="left_bx">所在产品</text>
					<view class="coliau" @click="showPopupproduct">{{ Productlocation || '请选择产品' }}</view>
					<!-- 	<MyPopup v-if="popupVisible" :childData="list1" :isVisible="upproduct" @itemSelected="eventi"
						title="选择产品" dataPropertyName="xingMu" /> -->
					<view style="margin-left: 245rpx;" @click="showPopupproduct"> > </view>
				</view>
			</view>
			<view class="suozxm">
				<view style="display: flex;">
					<text class="left_bx">所属领域</text>
					<picker class="coliau" @change="bindPickerChange" :value="index" :range="array">
						<view>请选择领域</view>
					</picker>
					<view style="margin-left: 245rpx;"> > </view>
				</view>
			</view>
			<view class="suozxm">
				<view style="display: flex;">
					<text class="left_bx">选择模块</text>
					<picker class="coliau" @change="bindPickerChange" :value="index" :range="array">
						<view>请选择模块</view>
					</picker>
					<view style="margin-left: 245rpx;"> > </view>
				</view>
			</view>
			<view class="suozxm">
				<view style="display: flex;">
					<text class="left_bx">提问对象</text>
					<picker class="coliau" @change="bindPickerChange" :value="index" :range="array">
						<view>请选择提问对象</view>
					</picker>
					<view style="margin-left: 245rpx;"> > </view>
				</view>
			</view>
		</view>
		<view style="height:20rpx; background:#F6F6F6; "> </view>

		<!-- 上传图片 -->
		<view class="Box_sctup">
			<view>上传图片</view>
			<image style="width: 220rpx; height: 220rpx; margin-top: 20rpx;"
				src="http://openapi.keyboardadmin.com:9001/KingdeeCommunity/pic_add@2x.png" mode=""></image>
		</view>
		<view style="background: #F6F6F6; height: 20rpx; width: 100%;"></view>

		<!-- 上传附件 -->
		<view class="Box_FJ" @click="selectFile">
			<view>上传附件</view>
			<view style="margin-right: 25rpx;">></view>
			<input type="file" ref="fileInput" style="display: none;" @change="uploadFile" />
		</view>
		<view style="background: #F6F6F6; height: 150rpx; width: 100%; display: flex; align-items: center;">
			<button class="release" @click="release">发布</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue';
	// import MyPopup from './components/MyPopup.vue';
	const taskTitle = ref('');
	const taskDescription = ref('');
	const selectedProject = ref('');
	const selectedProjectName = ref('');
	const Productlocation = ref('');
	const popupVisible = ref(false);
	const upproduct = ref(false);
	const SearchCustomers = ref('');
	const filteredCustomerList = ref([]);
	const myCustomerList = reactive([{
			xingMu: "国大管业"
		},
		{
			xingMu: "盛羽秀"
		},
		{
			xingMu: "管制行业"
		},
		{
			xingMu: "木质印章圆"
		},
		{
			xingMu: "月饼厂"
		},
		{
			xingMu: "达兴电子屏幕"
		},
		{
			xingMu: "飞则吕"
		},
		{
			xingMu: "银达布鲁克"
		},
		{
			xingMu: "博源"
		},
		{
			xingMu: "奥斯企业"
		},
		{
			xingMu: "西北周欣"
		},
		{
			xingMu: "嘉辰家臣"
		},
		{
			xingMu: "建发恒驰"
		},
		{
			xingMu: "天翼品牌"
		},
		{
			xingMu: "众益金信"
		},
	]);

	const list1 = reactive([{
			xingMu: "管业国大"
		},
		{
			xingMu: "盛羽秀"
		},
		{
			xingMu: "管制行业"
		},
		{
			xingMu: "木质印章圆"
		},
		{
			xingMu: "月饼厂"
		},
		{
			xingMu: "达兴电子屏幕"
		},
		{
			xingMu: "飞则吕"
		},
		{
			xingMu: "银达布鲁克"
		},
		{
			xingMu: "博源"
		},
		{
			xingMu: "奥斯企业"
		},
		{
			xingMu: "西北周欣"
		},
		{
			xingMu: "嘉辰家臣"
		},
		{
			xingMu: "建发恒驰"
		},
		{
			xingMu: "天翼品牌"
		},
		{
			xingMu: "众益金信"
		},
	]);

	const index = ref(0);
	const array = ref([]);

	const showPopup = ref(false);
	const bindPickerChange = (event) => {
		// 在这里编写处理选择器变化的逻辑，比如更新相应的数据等
		console.log('选择器的值发生了变化', event);
	};
	const selectFile = () => {
		console.log("点击上传附件");
		const fileInput = ref(null);
		if (fileInput.value) {
			fileInput.value.click();
		} else {
			console.error("File input ref not found");
		}
	};
	const showPopupproduct = (e) => {
		console.log("定义了", e);
	}
	const uploadFile = (event) => {
		const file = event.target.files[0];
		if (file) {
			console.log("Selected file:", file.name);
		} else {
			console.error("No file selected");
		}
	};

	const onInputBatchName = (e) => {
		SearchCustomers.value = e.target.value;
		filteredCustomerList.value = myCustomerList.filter(item => item.xingMu.toLowerCase().includes(SearchCustomers
			.value.toLowerCase()));
	};

	const getInquireCustomerList = (e) => {
		console.log("e", e);
	};

	const CustomerSelectionMethod = (item) => {
		selectedProject.value = item.xingMu;
		selectedProjectName.value = item.xingMu;
		showPopup.value = false;
	};

	const eventi = (e) => {
		const selectedItem = e;
		Productlocation.value = selectedItem.xingMu;
		upproduct.value = false;
	};

	const release = () => {
		uni.showModal({
			title: '提示',
			content: '是否确定发布？',
			success: (res) => {
				if (res.confirm) {
					console.log("发布按钮");
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	};
</script>

<style>
	.page {
		background-color: #FFFFFF;
	}

	.box {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.no-scroll {
		overflow: hidden !important;
	}

	.navigation-bar-title {
		font-weight: bold;
	}

	.container {
		padding: 20px;
	}

	.required {
		color: red;
		font-weight: bold;
	}

	.title-input {
		border-bottom: 1rpx solid #ccc;
		padding: 10px;
		margin-bottom: 20px;
	}

	.description-textarea {
		padding: 10px;
		margin-bottom: 20px;
		width: 670rpx;
		height: 182rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.submit-btn {
		background-color: #007aff;
		color: white;
		padding: 10px;
		text-align: center;
		border: none;
		border-radius: 5px;
	}

	.left-align {
		display: flex;
		align-items: center;
	}

	.form-item {
		width: 100%;
		margin-bottom: 10px;
		text-align: left;
	}

	.suozxm {
		box-sizing: border-box;
		padding: 28rpx 35rpx;
		display: flex;
		justify-content: space-between;
	}

	.coliau {
		width: 220rpx;
	}

	.left_bx {
		margin-right: 60rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #222222;
	}

	.Box_sctup {
		padding: 25rpx;
	}

	.Box_FJ {
		display: flex;
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		justify-content: space-between;
		padding: 0 25rpx;
		box-sizing: border-box;
		align-items: center;
	}

	button {
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
		width: 690rpx;
		height: 80rpx;
		background: #4170FF;
		border-radius: 40rpx;
	}
</style>